//手机号登录
import { View, Button, Input, Radio, Text, Form } from "@tarojs/components";
import "./index.scss";
import React, { useState, useEffect } from "react";
import Taro, { setStorageSync } from "@tarojs/taro";
import store from "../../store";
import http from "../../utils/http";
let Login = () => {
  definePageConfig({
    navigationBarTitleText: "登录/注册"
  });
  const [checked, setChecked] = useState(true);
  const [value, setValue] = useState("");
  const regPhone = /^1(3[0-9]|5[0-3,5-9]|6[0-9]|7[1-3,5-8]|8[0-9])\d{8}$/;
  const [code, setCode] = useState("获取验证码");
  const [codeValue, setCodeValue] = useState(""); //验证码
  const [pass, setPass] = useState(""); //密码
  let next = () => {
    store.s_wh.setUser({ phone: value, password: pass });
    Taro.navigateTo({
      url: "./datum"
    });
  };
  let judge = () => {
    if (regPhone.test(value)) {
      if (code == "获取验证码") {
        Taro.showToast({
          title: "请先获取验证码!",
          icon: "error",
          duration: 2000
        });
      } else {
        if (pass != "" && pass.length >= 8) {
          if (!checked) {
            Taro.navigateTo({
              url: "./agreement",
              success: () => {
                Taro.showToast({
                  title: "请先阅读并同意勾选商户入驻协议!",
                  icon: "none",
                  duration: 2000
                });
              }
            });
          } else {
            http({
              url: "/role/storeEnter",
              method: "post",
              data: {
                phone: value,
                verifyCode: codeValue,
                password: pass
              }
            }).then(res => {
              Taro.setStorageSync("token", res.data.token);
              if (res.data.code == 200) {
                //跳转入驻，不存在该商家
                Taro.getUserProfile({
                  desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
                  success: res => {
                    Taro.setStorageSync("userImg", res.userInfo.avatarUrl);
                    next();
                  }
                });
              } else if (res.data.code == 503) {
                //跳转到登录页面，存在该商家
                Taro.navigateTo({
                  url: "./login"
                });
              } else {
                // 验证码错误
                Taro.showToast({
                  title: "验证码错误!",
                  icon: "error",
                  duration: 2000
                });
              }
            });
          }
        } else {
          Taro.showToast({
            title: "密码至少需要8位数!",
            icon: "error",
            duration: 2000
          });
        }
      }
    } else {
      Taro.showToast({
        title: "请输入正确的手机号码!",
        icon: "none",
        duration: 2000
      });
    }
  };
  useEffect(() => {
    setChecked(store.s_wh.radio);
  });
  return (
    <View className="login">
       <View className="tit">
        <Text>账号注册</Text>
        <Text
          onClick={() => {
            Taro.navigateTo({
              url: "./login"
            });
          }}
          style={{ fontSize: " 20px" }}
        >
          去登录
        </Text>
      </View>
      <View>
        <Input
          type="number"
          placeholder="请输入手机号"
          onInput={value => {
            setValue(value.detail.value);
          }}
        />
      </View>
      <View>
        <Input
          type="password"
          placeholder="请输入至少8位的密码"
          onInput={value => {
            setPass(value.detail.value);
          }}
        />
      </View>
      <View className="code">
        <Input
          type="number"
          placeholder="请输入验证码"
          onInput={value => {
            setCodeValue(value.detail.value);
          }}
        />
        <Button
          onClick={() => {
            http({
              url: "/user/getVerifyCode",
              method: "post",
              data: {
                phone: value
              }
            }).then(res => {
              console.log(res.data);
              if (res.data.code == 200) {
                setCode("已发送");
                Taro.showToast({
                  title: res.data.msg,
                  icon: "none",
                  duration: 2000
                });
              } else {
                Taro.showToast({
                  title: "该账号已注册，跳转到登录页面",
                  icon: "none",
                  duration: 2000,
                  success:()=>{
                    Taro.navigateTo({
                      url:"./login"
                    })
                  }
                });
              }
            });
          }}
        >
          {code}
        </Button>
      </View>
      <View>
        <Radio checked={checked} disabled></Radio>
        <Text
          onClick={() => {
            Taro.navigateTo({
              url: "./agreement"
            });
          }}
          style={{ color: "#27c3fd", textDecoration: "underline" }}
        >
          点击阅读商户入驻申请协议
        </Text>
      </View>
      <Button className="next" onClick={judge}>
        下一步
      </Button>
    </View>
  );
};
export default Login;
